<template>
<div class="Supplementary">
  <el-dialog :visible.sync='supplementaryProjectSync' title="补抽专家信息" width="60%" :before-close="handleCloseDialog">
    <div class="condition-box">
        <div class="add-condition">
          <div class="condition_info" >
            <el-form  size="small">
              <el-form-item   class="choose" label="指定专家：" prop="defaultExpert">
                <el-select  multiple filterable remote reserve-keyword
                            placeholder="请输入专家名关键词"
                            v-model="conditionData.defaultExpert"
                            :remote-method="remoteDefaultExpert"
                            :loading="defaultExpertLoading">
                  <el-option v-for="item in defaultExpertOptions" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.idNumber }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-row v-for="(item,index) in conditionData.others"  :key="index">
              <el-form  :inline=true :model="conditionData.others[index]" size="small" >
                <el-form-item label="专家分类:" class="condition">
                  <el-select v-model="conditionData.others[index].extractCategory"  filterable  clearable>
                    <el-option v-for="c_item in categoryOptions" :key="c_item.id" :value="c_item.id" :label="c_item.categoryCode+' '+c_item.categoryName" >{{c_item.categoryCode+' '+c_item.categoryName}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="专家职称:" class="condition" >
                  <el-select   filterable clearable v-model="conditionData.others[index].expertTitle">
                    <el-option v-for="t_item in titleOptions" :key="t_item.id" :label="t_item.titleName" :value="t_item.titleName">{{t_item.titleName}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="抽取人数:"  class="condition">
                  <el-input-number c v-model="conditionData.others[index].extractNumber" :min=0   step-strictly></el-input-number>
                </el-form-item>
                <el-form-item>
                  <el-button
                      v-if="index!==0"
                      type="danger"
                      @click="deleteRow(index)"
                      size="small"

                  >删除</el-button>
                  <el-button v-if="index === 0" type="success"  @click="addRow" size="small" class="condition">新增</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>

        </div>
        <div class="add-avoid">
          <el-form label-width="100px" class="avoid-form">
            <el-form-item label="指定专家：">
              <el-select class="input" multiple filterable remote reserve-keyword
                         placeholder="请输入专家名关键词"
                         v-model="avoidMessage.defaultExpert"
                         :remote-method="remoteDefaultExpert"
                         :loading="defaultExpertLoading">
                <el-option v-for="item in defaultExpertOptions" :key="item.id" :label="item.name" :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.idNumber }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="回避单位:">
              <el-input v-model="avoidMessage.avoidUnit" class="input" type="textarea"
                        placeholder="请输入回避单位信息，多条请用“；”区分"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="回避地区:">
              <el-input v-model="avoidMessage.avoidRegion" class="input" type="textarea"
                        placeholder="请输入回避地区信息，多条请用“；”区分"
                        clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      <div class="button-box">
        <el-button type="primary" @click="supplementary">确定补抽</el-button>
      </div>
    </div>
    <div>注意，补抽条件不计入抽取条件和回避条件信息</div>
  </el-dialog>
</div>
</template>
<script>
import { GetAllTitleApi } from '@/request/title/title-api'
import { GetAllCategoryApi } from '@/request/category/category-api'
import { selectByName } from '@/request/expert/expert-api'
import { mapState } from 'vuex'
import store from '@/store'
import { Supplementary } from '@/request/ProjectResult/projectResult-api'

export default {
  computed:{
  ...mapState({
    supplementaryProjectId:state => state.ReviewResult.supplementaryProjectId,
    supplementaryProjectSync:state => state.ReviewResult.supplementaryProjectSync
  })
},
  created () {
    this.initCategory()
    this.initTitle()
  },
  data(){
    return{
      titleOptions:null,
      categoryOptions:[],
      avoidMessage: [],
      defaultExpertLoading:false,
      defaultExpertOptions:[],
      conditionData: {others:[{}]},
    }
  },
  methods: {
    close(){
      this.avoidMessage=[]
          this.defaultExpertLoading=false
          this.defaultExpertOptions=[]
          this.conditionData={others:[{}]}
      store.commit('ReviewResult/changeShowResultProjectId',null)
      store.commit('ReviewResult/changeSupplementaryProjectSync',false)
    },
    addRow(){
      // this.i += 1;
      this.conditionData.others.push({
        extractCategory:null,
        extractCategoryName:null,
        extractNumber:0,
        expertTitle:null
      });
    },
    deleteRow(index){
      this.conditionData.others.splice(index,1)
    },
    async initTitle () {
      let res = await GetAllTitleApi()
      if (res&&res.code===200){
        this.titleOptions=res.data
      }else {
        this.$message.error("获取职称失败")
      }
    },
    async initCategory () {
      let res = await GetAllCategoryApi()
      if (res && res.code === 200) {
        this.categoryOptions = res.data
      }
    },
    async remoteDefaultExpert (query) {
      if (query && query !== '') {
        this.defaultExpertLoading = true;
        this.defaultExpertOptions=[]
        //发送请求
        let res = await selectByName(query)
        if (res&&res.code===200){
          this.defaultExpertOptions=res.data
          this.defaultExpertLoading=false
        }else {
          this.$message.error("获取专家失败")
          this.defaultExpertLoading=false
        }
      }
    },
    handleCloseDialog () {
      this.$confirm('确定取消补抽吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
          if (e === 'cancel') {
          }
        }
      })
    },
    async supplementary () {

      const param = {
        extractDefaultExpert: this.conditionData.defaultExpert ? this.conditionData.defaultExpert : [],
        others: this.conditionData.others && (this.conditionData.others[0].expertTitle || this.conditionData.others[0].extractCategory) ? this.conditionData.others : [],
        projectId: this.supplementaryProjectId,
        extractDefaultAvoidExpert: this.avoidMessage.defaultExpert,
        avoidRegion: this.avoidMessage.avoidRegion,
        avoidUnit: this.avoidMessage.avoidUnit
      }
      let res = await Supplementary(param)
      if (res&&res.code===200){
        this.close()
        this.$message.success("补抽成功")
      }else {
        this.$message.error(res.msg?res.msg:"补抽失败")
      }
    }
  }
}
</script>
<style scoped lang="less">
.Supplementary{
  .condition-box{
    height: 550px;
    overflow-y: scroll;
      .add-condition{
        margin-top: 40px;
        padding: 20px;
        .add-button{
          float: right;
        }
        .condition_info{
          border: 0.5px solid #EBEEF5;
          padding: 10px;
          margin: 20px 0 10px 0;
          overflow-y: scroll;
        }
      }
    .add-avoid {
      padding: 20px;
      margin: 20px;

      .avoid-form {
        overflow-y: scroll;
        border: 0.5px solid #EBEEF5;
        padding-top: 20px;
        .el-form-item {
          ::v-deep .el-form-item__content {
            margin-left: 0 !important;
          }

          .input {
            width: 350px;
          }
        }

      }
    }
    .button-box{
      text-align: center;
    }
  }
}
</style>
